<template>
  <div
    class=""
    :style="{
      height: '100%',
      '--imgw': getscalepx(1),
      '--imgh': getscalepx(3),
      '--imgr': getscalepx(-13),
      '--imgt': getscalepx(-5),
      '--imgp': getscalepx(5),
    }"
  >
    <beijingdatatable
      :header="header"
      :datalist="datalist"
      :coltype="'banma'"
    />
  </div>
</template>
<script>
import commonmixins from "@/mixins/bigScreen/commonmixins";

export default {
  name: "datatablereyuanzzn1111",
  mixins: [commonmixins],
  components: {},
  data() {
    return {
      header: [],
      datalist: [],
      hpObjArr: [],
    };
  },
  computed: {},
  watch: {
    "$store.state.daping.bigScreen": {
      handler: function (n, o) {
        let n_tmp = n;
        let g_bigscreen_data_arr = n_tmp.filter((item) => {
          if (item.attrName == "heatplant_pids") {
            return true;
          }
        });
        var hpObjArr = [];
        var hpPidArr = [];
        var pidStrArr = g_bigscreen_data_arr[0].attrValue.split(","); //【2019年12月2日】在大屏配置页面勾选的热源 并且按照顺序传输过来
        for (var i = 0; i < pidStrArr.length; i++) {
          // var type = pidStrArr[i].split("@@")[0];
          var pid = pidStrArr[i].split("@@")[1];
          var name = pidStrArr[i].split("@@")[2];
          hpPidArr.push(pid);
          hpObjArr.push({
            pid: pid,
            name: name,
          });
        }
        this.hpObjArr = hpObjArr;
      },
    },

    "$store.state.daping.reyuantable": {
      handler: function (n, o) {
        this.loadData(n);
      },
    },
  },
  mounted() {
    // let aaa = [];
    // for (let index = 0; index < 20; index++) {
    //   let aaaa = [
    //     "计量站" + _.random(0, 100),
    //     _.random(0, 100),
    //     _.random(0, 100),
    //     _.random(0, 100),
    //     _.random(0, 100),
    //     _.random(0, 100),
    //     _.random(0, 100),
    //   ];

    //   aaaa = aaaa.map((item, index) => {
    //     if (index != 0) {
    //       let fff = _.random(0, 100);
    //       if (fff > 50) {
    //         if (item > 50) {
    //           return (
    //             '<span style="color: #DA5A28;position: relative;"><div class="tablewarnhigh"></div>' +
    //             item +
    //             "</span>"
    //           );
    //         } else {
    //           return (
    //             '<span style="color: #139CF6;position: relative;"><div class="tablewarnlow"></div>' +
    //             item +
    //             "</span>"
    //           );
    //         }
    //       } else {
    //         return (
    //           '<span style="color: #ACCAD5;position: relative;">' +
    //           item +
    //           "</span>"
    //         );
    //       }
    //     } else {
    //       return item;
    //     }
    //   });
    //   aaa.push(aaaa);
    // }
    // this.datalist = aaa;
  },
  methods: {
    loadData(data200) {
      //header------------------------------------------------------
      let unitcolor = "#56C5FA";
      this.header = [
        {
          name: `<div style='background-image: url("/configuration/2d/reyuan.png");width: fit-content;background-size: 100% 100%;background-position: center;background-repeat: no-repeat;padding: 5px;'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>`,
          flex: 15,
        },
        {
          name: `供温<br/><span style="color: ${unitcolor};">(℃)</span>`,
          flex: 10,
        },
        {
          name: `回温<br/><span style="color: ${unitcolor};">(℃)</span>`,
          flex: 10,
        },
        {
          name: `供压<br/><span style="color: ${unitcolor};">(MPa)</span>`,
          flex: 10,
        },
        {
          name: `回压<br/><span style="color: ${unitcolor};">(MPa)</span>`,
          flex: 10,
        },
        {
          name: `流量<br/><span style="color: ${unitcolor};">(t/h)</span>`,
          flex: 10,
        },
        {
          name: `热量<br/><span style="color: ${unitcolor};">(MW)</span>`,
          flex: 10,
        },
      ];
      this.header = this.header.map((item) => {
        item.name = "<div>" + item.name + "</div>";
        return item;
      });
      //data-----------------------------------------------------
      let hpObjArr = this.hpObjArr;
      let _this = this;

      for (var i in hpObjArr) {
        for (var j in data200) {
          if (hpObjArr[i]["pid"] == data200[j]["pid"]) {
            hpObjArr[i]["aligntime"] = data200[j]["aligntime"]
              ? new Date(data200[j]["aligntime"]).getTime()
              : undefined;
            hpObjArr[i]["m_001t"] =
              data200[j]["m_001t"] || data200[j]["m_001t"] == 0
                ? data200[j]["m_001t"].toFixed(1)
                : undefined;
            hpObjArr[i]["m_002t"] =
              data200[j]["m_002t"] || data200[j]["m_002t"] == 0
                ? data200[j]["m_002t"].toFixed(1)
                : undefined;
            hpObjArr[i]["m_001p"] =
              data200[j]["m_001p"] || data200[j]["m_001p"] == 0
                ? data200[j]["m_001p"].toFixed(2)
                : undefined;
            hpObjArr[i]["m_002p"] =
              data200[j]["m_002p"] || data200[j]["m_002p"] == 0
                ? data200[j]["m_002p"].toFixed(2)
                : undefined;
            hpObjArr[i]["m_001q"] =
              data200[j]["m_001q"] || data200[j]["m_001q"] == 0
                ? data200[j]["m_001q"].toFixed(1)
                : undefined;
            hpObjArr[i]["m_003qc"] =
              data200[j]["m_003qc"] || data200[j]["m_003qc"] == 0
                ? (data200[j]["m_003qc"] / 3.6).toFixed(1)
                : undefined;
          }
        }
      }
      let dataa = [];
      hpObjArr.map((item) => {
        dataa.push([
          item.name,
          item.m_001t ? item.m_001t : "-",
          item.m_002t ? item.m_002t : "-",
          item.m_001p ? item.m_001p : "-",
          item.m_002p ? item.m_002p : "-",
          item.m_001q ? item.m_001q : "-",
          item.m_003qc ? item.m_003qc : "-",
        ]);
      });


      let resdatalist = []
      dataa.map(each_row => {
        resdatalist.push(this.settype(each_row))
      })

      this.datalist = resdatalist
    },
    settype(data) {
      return data.map((item, index) => {
        if (index != 0) {
          let fff = _.random(0, 100);
          if (fff > 50) {
            if (item > 50) {
              return (
                '<span style="color: #DA5A28;position: relative;"><div class="tablewarnhigh"></div>' +
                item +
                "</span>"
              );
            } else {
              return (
                '<span style="color: #139CF6;position: relative;"><div class="tablewarnlow"></div>' +
                item +
                "</span>"
              );
            }
          } else {
            return (
              '<span style="color: #ACCAD5;position: relative;">' +
              item +
              "</span>"
            );
          }
        } else {
          return item;
        }
      });
    },

  },
};
</script>
<style lang='scss'>
.tablewarnhigh {
  position: absolute;
  right: var(--imgr);
  top: var(--imgt);
  background-image: url("/configuration/2d/gaojinghigh.png");
  width: var(--imgw);

  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding: var(--imgp);
}
.tablewarnlow {
  position: absolute;
  right: var(--imgr);
  top: var(--imgt);
  background-image: url("/configuration/2d/gaojinglow.png");
  width: var(--imgw);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding: var(--imgp);
}
</style>